<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>活动详情</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!--[if lt IE 9]>
		<script src="js/html5shiv.min.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
	<meta name="renderer" content="webkit">
	<link rel="shortcut icon" href="favicon.ico">
	<style>
		[v-cloak] {
				display: none!important;
    }
    .joinBtn {
      margin-top: 20px;
    }
    .my-over-close {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;
    }
		.my-box {
			position: absolute;
			left: 0;
			top: 257px;
			right: 0;
			width: 320px;
			margin: auto;
			z-index: 9;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.my-box img {
			width: 180px;
			height: 180px;
		}
		.sign-up-success-txt {
			font-size: 16px;
			color: #fff;
		}
		.my-operate {
			margin-top: 20px;
		}
		.my-btn {
			width: 225px;
			color: #fff;
			font-size: 15px;;
			text-align:center;
			margin-top: 10px;
			cursor: pointer;
		}
		.btn-disabled {
			display: inline-block;
			width: 348px;
			color: #fff;
			font-size: 15px;;
			text-align:center;
			margin-top: 10px;
			background-color: #c8c9cc;
			height: 45px;
			line-height: 45px;
			border: none;
			border-radius: 3px;
		}
	</style>
</head>
<body>
<div id="app" v-cloak>	
	<header>
	</header>
	<div class="header-space"></div>
	<section class="section441">
		<div class="content">
			<a href="" class="item on">活动信息</a>
		</div>
	</section>
	<section class="section191" style="min-height: 600px;">
		<div class="content">
			<div class="title hasImg">
				<img :src="activityDetail.cover" alt="" class="img">
				<h2>{{activityDetail.name}}</h2>
				<div class="con">
					<p>报名人数：{{activityDetail.num}} 人</p>
					<p>状态：{{activityDetail.status}}</p>
					<p>起止时间：{{activityDetail.start}}-{{activityDetail.end}}</p>
				</div>
				<div class="operate">
					<a v-if="activityDetail.is_join === 0" class="btn joinBtn" href="javascript:void(0)" @click="handleShowJoinBox">立即报名</a>
					<div v-if="activityDetail.is_join === 1" class="btn-disabled" href="javascript:void(0)">已报名</div>
				</div>
			</div>
			<div class="box">
				{{activityDetail.content}}
				<img :src="activityDetail.detail" alt="">
			</div>
		</div>
	</section>
	<div class="alert alert-report-form show" v-if="showJoinBox">
    <div class="my-over-close" @click="showJoinBox = false"></div>
    <div class="box">
      <div class="face"><img :src="userInfo.logo" alt=""></div>
      <h3>{{activityDetail.name}}</h3>
      <div class="form">
        <div class="item"><input type="text" v-model="submitName" placeholder="请输入您的姓名" class="input"></div>
        <div class="item"><input type="text" v-model="phoneNum" placeholder="请输入您的手机号" class="input"></div>
      </div>
      <div class="operate">
        <a href="javascript:void(0)" @click="confirmOperate" class="btn">确定</a>
      </div>
    </div>
	</div>
	<div class="alert alert-report-form show" v-if="showSignUpSuccess">
    <div class="my-over-close" @click="showSignUpSuccess = false"></div>
    <div class="my-box">
			<img src="images/sign_up_success.png" alt="">
			<div class="sign-up-success-txt">可在“我的”-“我的报名”中查看报名记录。</div>
      <div class="operate my-operate">
				<a href="59.html" class="btn">我的报名</a>
				<div @click="showSignUpSuccess = false" class="my-btn">知道了</div>
      </div>
    </div>
  </div>  
	<footer id="footer"></footer>
</div>	
<script src="js/jquery.min.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/request.js"></script>
<script>
	$(function(){
		$("header").load("./enterpriseCommon/header.html");
		$("#footer").load("./enterpriseCommon/footer.html");
  })
  var rules = {
    submitName: {
      test: function(val) {
        return val !== ''
      },
      msg: '姓名必须填写'
    },
    phoneNum: {
      test: function(val) {
        return /^1[3456789]\d{9}$/.test(val)
      },
      msg: '请正确填写手机号码'
    }
  }
	var vm = new Vue({
		el: '#app',
		data () {
			return {
				id: this.getRequest().id || '',
        activityDetail: '',
        showJoinBox: false,
				showSignUpSuccess: false,
        submitName: '',
        phoneNum: '',
        status: '',
				userInfo: ''
			}
		},
		mounted () {
			this.getUserInfo();
			this.fetchActivityDetail();
		},
		methods: {
			fetchActivityDetail() {
				var vm = this;
				var url = 'enterprise/activity_info/detail/' + this.id;
				request( url, 'GET', '',
					function (res) {
						console.log(res);
            vm.activityDetail = res.data.activity;
					},
					function (err) {
						console.log('err', err);
					}
				)
      },
      handleShowJoinBox () {
				if(this.activityDetail.status == '已结束') {
					this.$message({
						message: '活动已结束',
						type: 'warning'
					});
					return
				}
        this.showJoinBox = true;
      },
			confirmOperate() {
        // console.log(111);
        var vm = this;
        var loading = this.$loading({
					lock: true,
					text: '正在提交',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
        var isPass = Object.keys(rules).every(function(key) {
					var val = this[key];
					var rule = rules[key];
					var result = rule.test(val);
					if (!result) {
						loading.close();
						this.$message({
							type: 'warning',
							message: rule.msg
						})
					}
					return result
				}, this);
				if (!isPass) return;
				request('enterprise/activity_info/join', 'PUT', JSON.stringify({
					id: this.activityDetail.id,
					name: this.submitName,
					telephone: this.phoneNum
        }),
					function (res) {
            console.log(res);
						vm.$message.success(res.message);
            loading.close();
            vm.showJoinBox = false;
						vm.showSignUpSuccess = true;
					},
					function (err) {
            console.log('err', err);
						var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
						loading.close();
            vm.showJoinBox = false;
					}
				)
			},
			getUserInfo: function () {
        var vm = this;
        request(
          "enterprise/company/employee_base_info",
          "GET",
          "",
          function (res) {
            vm.userInfo = res.data;
            vm.submitName = res.data.name;
						vm.phoneNum = res.data.telephone;
          },
          function (err) {
            vm.$message.error(err.message);
          }
        );
      },
			getRequest() {  
				var url = location.search;
				var theRequest = {};
				var strs = []
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					strs = str.split("&");
					for(var i = 0; i < strs.length; i ++) {
							theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			}
		}
	})
</script>
</body>
</html>